<template>
	<div ref="chart" class="xxxxxx"></div>
</template>

<script>
import * as echarts from 'echarts'

const ips = ['192.162.1.1', '192.162.1.2', '192.162.1.3', '192.162.1.4']
function getRandomArbitrary(min, max) {
  const date = new Date();
  return ips.reduce((acc, cur) => {
    acc[cur] = [date.getTime(), Math.random() * (max - min) + min];
    return acc;
  }, {})
}
const series = ips.map(ip => {
  return {
    name: ip,
    type: 'line',
    data: [getRandomArbitrary(100, 300)],
  }
})
export default {
	data() {
		return {
			option: {
				legend: {},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category'
				},
				yAxis: {
					type: 'value',
				},
				series: [],
			},
		}
	},
	mounted() {
		const myChart = echarts.init(this.$refs.chart)
		myChart.setOption(this.option)
		// setInterval(() => {
		// 	data.push(getRandomArbitrary(100, 300))
		// 	myChart.setOption({
    //     series: ips.map(ip => {
    //       return {
    //         name: ip,
    //         type: 'line',
    //         data: data.map(item => item[ip]),
    //       }
    //     })
    //   })
		// }, 1000)
	},
}
</script>

<style scoped>
.xxxxxx {
	position: fixed;
	z-index: 10000000;
	top: 50%;
	left: 50%;
	width: 500px;
	height: 300px;
	transform: translate(-50%, -50%);
	background-color: rgb(255, 255, 255);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
</style>
